<template>
  <div class="table">
    <el-table  @row-click="onShow"
               v-loading="loading"
      :data="tableData()"
      style="width: 100%"
      class="center-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="!isCheckbox" type="selection" width="55" />
      <el-table-column type="index" label="序号" width="50" />
      <ColumnData v-for="column of columns" :key="column.label" :item="column" />
      <el-table-column fixed="right" v-if="!hasOperate" label="操作" width="200">
        <template #default="scope">
          <div class="operate">
            <slot :row="scope.row" name="operate" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination
        background
        layout="prev, pager, next ,total,sizes,jumper"
        :total="totalNum"
        :page-size="state.limit"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, watch, ref } from 'vue'
import ColumnData from './column-data.vue'
export default defineComponent({
  components: {
    ColumnData,
  },
  emits: {
    modalValueChange: null,
    selectList: null,
    rowClick: null,
    delectTable: null,
  },
  props: {
    tableArr: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
    },
    pagination: {
      type: Object,
      required: true,
    },
    loading: {
      type: Boolean,
    },
    hasOperate: {
      type: Boolean,
      defaults: true,
    },
    isCheckbox: {
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    //表格用到的参数
    const state = reactive({
      ...props.pagination,
    })
    const onShow = (row)=>{
      emit('rowClick',row)
    }
    const isperate = ref(props.hasOperate)
    console.log(props.hasOperate, isperate, 'gbfvdsfrgfds')
    const isLoading = ref(props.loading)
    const multipleSelection = ref([])
    const handleSelectionChange = (selectList) => {
      // console.log(selectList,'handleSelectionChange')
      // let ids: number[] = []
      emit('selectList', selectList)
      multipleSelection.value = selectList
      let ids: number[] = []
      if (selectList.length > 0) {
        selectList.filter(
            (item, index) => {
              if (item.id) {
                ids.push(item.id)
                emit('delectTable', ids)
              } else if (item.userId) {
                ids.push(item.userId)
                emit('delectTable', ids)
              }

            }
        )
      } else {
        emit('delectTable', [])
      }

    }

    const handleEdit = (index: number, row) => {
      console.log(index, row)
      emit('modalValueChange', true)
    }
    const handleDelete = (index: number, row) => {
      console.log(index, row)
    }
    let totalNum: any = ref(props.pagination.total)
    let dataList: any = ref(props.tableArr)
    watch(
      () => props.tableArr,
      (newVal) => {
        totalNum.value = props.pagination.total
        dataList.value = newVal
      }
    )
    watch(
      () => props.loading,
      (newVal) => {
        console.log(newVal, 'props.loading')
        isLoading.value = newVal
      }
    )
    watch(
      () => props.pagination.page,
      (newVal) => {
        console.log(newVal, 'props.loading')
        isLoading.value = newVal
      }
    )
    //前端限制分页（tableData为当前展示页表格）
    const tableData = () => {
      // let list = JSON.parse(JSON.stringify((dataList.value)))
      if (!props.tableArr) {
        return
      }
      return props.tableArr.filter(
        (item, index) => index < state.page * state.limit && index >= state.limit * (state.page - 1)
      )
    }
    //改变页码
    const handleCurrentChange = (e) => {
      console.log(e)
      state.page = e
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e)
      state.limit = e
    }
    return {
      totalNum,
      isLoading,
      isperate,
      handleSelectionChange,
      handleEdit,
      handleDelete,
      tableData,
      handleCurrentChange,
      handleSizeChange,
      // ...toRefs(state),
      state,
      onShow,

    }
  },
})
</script>

<style lang="scss" scoped>
.table {
  margin-top: 15px;
}
.example-pagination-block {
  margin-top: 15px;
  text-align: center;
}
/deep/.el-pagination .btn-next .el-icon {
  margin: 0 auto;
}

/deep/.el-pagination .btn-prev .el-icon {
  margin: 0 auto;
}

:deep(.center-table td),
:deep(.center-table th) {
  text-align: center !important;
}
</style>
